<template>
  <div id="airpods2" v-if="data">
    <div class="airPods-title">
      <div class="center">
        <div>配件</div>
        <div>浏览全部</div>
      </div>
    </div>
    <div class="airPods">
      <div class="center">
        <p>购买 Airpods，Apple Music 免费试听6个月。</p>
      </div>
    </div>
    <div class="f1">
      <div class="center">
        <div class="zc">
          <div class="airPods-nr">
            <span>免费镌刻服务</span>
            <h2>AirPods（第二代）</h2>
            <div class="airPods-price">
              <div>MB 83/月 (24 期)</div>
              <div>或</div>
              <div>RMB 999</div>
            </div>
            <div class="airPods-gxh">
              <ul>
                <li>
                  <svg
                    viewBox="0 0 35 35"
                    class="
                      as-svgicon
                      as-svgicon-engraving
                      as-svgicon-base
                      as-svgicon-engravingbase
                    "
                    role="img"
                    aria-hidden="true"
                    width="25px"
                    height="25px"
                  >
                    <path fill="none" d="M0 0h35v35H0z"></path>
                    <path
                      d="M17.5 6.1A11.4 11.4 0 116.1 17.5 11.413 11.413 0 0117.5 6.1m0-1.1A12.5 12.5 0 1030 17.5 12.5 12.5 0 0017.5 5z"
                    ></path>
                    <path
                      d="M23 20.5H12a.5.5 0 010-1h11a.5.5 0 010 1zM25 15.5H10a.5.5 0 010-1h15a.5.5 0 010 1z"
                    ></path>
                  </svg>
                  <div></div>
                  免费个性化服务
                </li>
                <li>
                  表情符号、名字、缩写和数字混合镌刻，打造你独一无二的专属
                  AirPods。Apple 独家福利。
                </li>
              </ul>
            </div>
            <div class="airPods-ps">
              <ul class="rq">
                <li>
                  <svg
                    width="25"
                    height="25"
                    class="
                      as-svgicon
                      as-svgicon-boxtruck
                      as-svgicon-reduced
                      as-svgicon-boxtruckreduced
                    "
                    role="img"
                    aria-hidden="true"
                  >
                    <path fill="none" d="M0 0h25v25H0z"></path>
                    <path
                      d="M23.482 12.847l-2.92-3.209A1.947 1.947 0 0018.985 9H17V6.495a2.5 2.5 0 00-2.5-2.5h-11a2.5 2.5 0 00-2.5 2.5v9.75a2.5 2.5 0 002.5 2.5h.548A2.746 2.746 0 006.75 21.02 2.618 2.618 0 009.422 19h6.681a2.744 2.744 0 005.347-.23h.735A1.656 1.656 0 0024 16.98v-2.808a1.937 1.937 0 00-.518-1.325zM8.426 18.745a1.74 1.74 0 01-3.352 0 1.577 1.577 0 01.015-1 1.738 1.738 0 013.322 0 1.578 1.578 0 01.015 1zM9.447 18a2.726 2.726 0 00-5.394-.255H3.5a1.502 1.502 0 01-1.5-1.5v-9.75a1.502 1.502 0 011.5-1.5h11a1.502 1.502 0 011.5 1.5V18zm10.972.77a1.738 1.738 0 01-3.337 0 1.573 1.573 0 010-1 1.742 1.742 0 113.337 1zM23 16.98c0 .569-.229.79-.815.79h-.735A2.73 2.73 0 0017 16.165V10h1.986a.976.976 0 01.838.314l2.927 3.214a.95.95 0 01.249.644zm-1.324-3.36a.512.512 0 01.174.38h-3.306a.499.499 0 01-.544-.528V11h1.073a.76.76 0 01.594.268z"
                      fill="#1d1d1f"
                    ></path>
                  </svg>
                </li>
                <div></div>
                &nbsp;
                <ul class="wz">
                  <li>预计发货日期：</li>
                  <li>1 个工作日</li>
                  <li>免费送货</li>
                </ul>
              </ul>
              <ul class="qh">
                <li>
                  <svg
                    viewBox="0 0 25 25"
                    class="
                      as-svgicon
                      as-svgicon-applestorepickup
                      as-svgicon-reduced
                      as-svgicon-applestorepickupreduced
                    "
                    role="img"
                    aria-hidden="true"
                    width="25px"
                    height="25px"
                  >
                    <path fill="none" d="M0 0h25v25H0z"></path>
                    <path
                      d="M18.5 5h-1.775a4.231 4.231 0 00-8.45 0H6.5A2.5 2.5 0 004 7.5v11A2.5 2.5 0 006.5 21h12a2.5 2.5 0 002.5-2.5v-11A2.5 2.5 0 0018.5 5zm-6-3a3.245 3.245 0 013.225 3h-6.45A3.245 3.245 0 0112.5 2zM20 18.5a1.5 1.5 0 01-1.5 1.5h-12A1.5 1.5 0 015 18.5v-11A1.5 1.5 0 016.5 6h12A1.5 1.5 0 0120 7.5z"
                    ></path>
                    <path
                      d="M14.4 12.448a1.592 1.592 0 01.738-1.328 1.607 1.607 0 00-1.37-.687c-.52 0-.941.317-1.22.317s-.663-.3-1.129-.3a1.861 1.861 0 00-1.739 2.068 4.32 4.32 0 00.723 2.3c.346.491.648.883 1.084.883s.617-.287 1.144-.287c.55 0 .663.279 1.137.279s.791-.43 1.084-.853a3.24 3.24 0 00.474-.989 1.516 1.516 0 01-.926-1.403zM12.583 10.357a1.346 1.346 0 00.941-.5 1.594 1.594 0 00.361-.974.731.731 0 00-.008-.136 1.5 1.5 0 00-1.016.528 1.547 1.547 0 00-.384.943c0 .053.008.106.008.128.03.004.06.011.098.011z"
                    ></path>
                  </svg>
                </li>
                <div></div>
                &nbsp;
                <li>取货：</li>
              </ul>
            </div>
            <div class="btn1">
              <button @click="addToShopBag">添加到购物车</button>
            </div>
            <div class="store">
              <div>
                <h5>还拿不定主意？</h5>
                <p>将此商品收藏到清单，方便回头再来挑选。</p>
              </div>
              <svg
                width="35px"
                height="35px"
                class="
                  as-svgicon
                  as-svgicon-bookmark
                  as-svgicon-base
                  as-svgicon-bookmarkbase
                "
                role="img"
                aria-hidden="true"
              >
                <path fill="none" d="M0 0h35v35H0z"></path>
                <path
                  d="M21.952 6.433a2.157 2.157 0 011.567.481A2.228 2.228 0 0124 8.516v19.866a.709.709 0 01-.018.178.7.7 0 01-.058-.013 8.985 8.985 0 01-.757-.674l-4.866-4.901a1.111 1.111 0 00-1.602 0l-4.857 4.891a7.25 7.25 0 01-.754.676.145.145 0 01-.053.028h-.015a.681.681 0 01-.02-.185V8.516a2.228 2.228 0 01.48-1.602 2.158 2.158 0 011.568-.48h8.904m0-1h-8.904a3.077 3.077 0 00-2.278.776A3.144 3.144 0 0010 8.516v19.866a1.276 1.276 0 00.276.868.956.956 0 00.76.317 1.073 1.073 0 00.632-.213 8.377 8.377 0 00.874-.776l4.866-4.9a.115.115 0 01.184 0l4.866 4.9a10.454 10.454 0 00.868.77 1.048 1.048 0 00.639.219.956.956 0 00.76-.317 1.276 1.276 0 00.275-.868V8.516a3.144 3.144 0 00-.77-2.306 3.077 3.077 0 00-2.278-.776z"
                ></path>
              </svg>
            </div>
            <div class="help">
              <svg
                viewBox="0 0 23 25"
                width="25px"
                height="25px"
                class="
                  as-svgicon
                  as-svgicon-chat
                  as-svgicon-reduced
                  as-svgicon-chatreduced
                "
                role="img"
                aria-hidden="true"
              >
                <path fill="none" d="M0 0h23v25H0z"></path>
                <path
                  d="M22.71 15.441c0-2.849-2.846-5.154-6.417-5.154h-.076a8.059 8.059 0 00-1.035.078c-2.72.377-4.823 2.112-5.228 4.3a4.218 4.218 0 00-.078.768c0 .089.011.175.016.262.169 2.84 3.035 4.885 6.538 4.885.179 0 .36-.005.541-.016A8.149 8.149 0 0020.278 22c.517 0 .667-.413.374-.78a10.986 10.986 0 01-.96-1.4 4.937 4.937 0 003.018-4.379zm-3.446 3.471l-.942.446.484.923c.046.088.1.178.151.268a11.49 11.49 0 01-1.431-.809l-.279-.185-.334.02c-.162.01-.323.014-.482.014-3.094 0-5.52-1.8-5.551-4.1v-.044a3.237 3.237 0 01.183-1.053 4.923 4.923 0 013.729-2.935 6.889 6.889 0 011.169-.153c.112-.005.222-.013.336-.013 2.987 0 5.417 1.864 5.417 4.154a3.957 3.957 0 01-2.45 3.467z"
                ></path>
                <path
                  d="M8.915 14.819a9.88 9.88 0 01-.794.033q-.305 0-.616-.018l-.334-.02-.279.186a13.767 13.767 0 01-2.578 1.356 9.545 9.545 0 00.626-1l.484-.922-.941-.446A5.18 5.18 0 011.29 9.43c0-2.994 3.141-5.43 7-5.43 3.826 0 6.941 2.393 7 5.351a8.9 8.9 0 011-.063C16.19 5.8 12.684 3 8.292 3c-4.453 0-8 2.875-8 6.43a6.159 6.159 0 003.764 5.457 13.707 13.707 0 01-1.2 1.752c-.366.458-.179.973.466.973a10.16 10.16 0 004.123-1.781q.34.02.675.02c.263 0 .522-.011.779-.029-.009-.127-.023-.253-.023-.381a5.154 5.154 0 01.039-.622z"
                ></path>
              </svg>
              <div></div>
              &nbsp;
              <div>获得购买帮助,立即在线交流 或致电 400-666-8800.</div>
            </div>
          </div>
          <div class="airPods-tu">
            <div id="box">
              <img :src="data[`ysh2_lg.jpg`]" alt="" ref="bigimg" />
              <div ref="imgs">
                <img
                  data-lg="ysh2_lg.jpg"
                  class="active airpodsBoxItem"
                  :src="data[`ysh2_sm.jpg`]"
                  alt=""
                  @click="dxtclick(0)"
                />
                <img
                  data-lg="ysh2_lg2.jpg"
                  :src="data[`ysh2_sm2.jpg`]"
                  alt=""
                  class="airpodsBoxItem"
                  @click="dxtclick(1)"
                />
                <img
                  data-lg="ysh2_lg3.jpg"
                  :src="data[`ysh2_sm3.jpg`]"
                  alt=""
                  class="airpodsBoxItem"
                  @click="dxtclick(2)"
                />
                <img
                  data-lg="ysh2_lg4.jpg"
                  :src="data[`ysh2_sm4.jpg`]"
                  alt=""
                  class="airpodsBoxItem"
                  @click="dxtclick(3)"
                />
                <img
                  data-lg="ysh2_lg5.jpg"
                  :src="data[`ysh2_sm5.jpg`]"
                  alt=""
                  class="airpodsBoxItem"
                  @click="dxtclick(4)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="f2">
      <div class="center">
        <div class="airPods-ks">
          <ul>
            <li>
              <h2>花样百出,此刻出没。</h2>
            </li>
            <li>
              在 AirPods 上免费玩镌刻,表情符号、名字、缩写和数字混搭着来。Apple
              独家福利。
            </li>
          </ul>
          <div>
            <img :src="data[`airpods-engraving-banner-202110.jpg`]" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="f3">
      <div class="center">
        <div class="airPods-jx">
          <ul>
            <li>
              <h4>AirPods 机型比较</h4>
            </li>
            <li style="color: #0066cc">查看所有机型 ></li>
          </ul>
          <div>
            <img :src="data[`airpods-compare-banner-202110.jpg`]" alt="" />
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div class="item">
      <div class="title" ref="cpxx" @click="xlClick(0)">
        <h2 style="font-size: 40px">产品信息</h2>
        <p>
          <svg
            viewBox="0 0 17 8.85"
            class="
              as-svgicon
              as-svgicon-chevrondown
              as-svgicon-base
              as-svgicon-chevrondownbase
            "
            role="img"
            aria-hidden="true"
            width="35px"
            height="35px"
          >
            <path fill="none" d="M0 0h35v35H0z"></path>
            <path
              fill="none"
              stroke="#86868b"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2.25"
              d="M15 1.13L8.5 7.72 2 1.13"
            ></path>
          </svg>
        </p>
      </div>

      <div class="detail">
        <h2 style="font-size: 30px">概述</h2>
        <div class="nr">
          <div>
            <h4>妙出新境界。</h4>
            <div>
              AirPods
              带来经重新构想的无线耳机体验。从充电盒中一取出，它们就已随时待命，与你的
              iPhone、Apple Watch、iPad 或 Mac 连接使用。
            </div>
          </div>
          <div>
            <div>
              简简单单，轻点一下完成设置，就能开始体验 AirPods
              的妙用。它们会自动启动并始终保持连接。AirPods
              甚至可以即时感知你是否已将它们戴入耳中，并会在你摘下它们时暂停播放。
            </div>
          </div>
          <div>
            <div>
              只需说声“嘿
              Siri”并提出你的要求，即可调节音量、更改歌曲、拨打电话，甚至还能获取路线信息。你可以仅佩戴其中一只耳机，也可以双耳同时佩戴，在聆听音乐或播客时轻点两下，就能开始播放或跳过当前内容。
            </div>
          </div>
          <div>
            <div>
              AirPods 一次充电最长可聆听 5 小时¹ 或者通话 3
              小时²。另外，充电盒存储的电量还能为耳机充电多次，使 AirPods
              的聆听时间可超过 24 小时，更能与你时刻相伴³。需要快速充电？只需将
              AirPods 放入充电盒中充电 15 分钟，便可获得最长达 3
              小时的聆听时间⁴或最长达 2 小时的通话时间⁵。
            </div>
          </div>
          <div>
            <div>
              AirPods 配备了全新的 Apple H1
              耳机芯片，使用光学传感器和运动加速感应器来检测你是否已将它们戴入耳中。无论是双耳同时使用
              AirPods，还是仅佩戴其中一只，H1
              芯片都能够自动传送音频和激活麦克风。当你在打电话或与 Siri
              交谈时，额外的语音识别加速感应器与采用波束成形技术的麦克风默契协作，可过滤掉外界噪音，清晰锁定你的声音。
            </div>
          </div>
        </div>
      </div>

      <div class="detail">
        <h2 style="font-size: 30px">亮点</h2>
        <div class="nr">
          <div>
            <div>由 Apple 设计</div>
            <div>自动开启、自动连接</div>
            <div>轻松搭配你的各种 Apple 设备⁶</div>
            <div>通过"嘿 Siri"或轻点两下快速访问 Siri</div>
            <div>轻点两下开始播放或跳过当前内容</div>
            <div>在充电盒中快速充电</div>
            <div>充电盒可通过闪电接口充电</div>
            <div>层次丰富、高品质的音频和声音</div>
            <div>在不同设备之间流畅转换</div>
          </div>
        </div>
      </div>

      <div class="detail">
        <h2 style="font-size: 30px">包装内容</h2>
        <div class="nr">
          <div>
            <div>AirPods</div>
            <div>充电盒</div>
            <div>闪电转 USB-A 连接线</div>
            <div>资料</div>
          </div>
        </div>
      </div>

      <div class="detail">
        <h2 style="font-size: 30px">概述</h2>
        <div class="nr">
          <div>
            <h4>AirPods 感应器 (每枚)：</h4>
            <div>
              双波束成形麦克风 双光学传感器 运动加速感应器 语音加速感应器
            </div>
          </div>
          <div>
            <h4>芯片</h4>
            <div>H1 耳机芯片</div>
          </div>
          <div>
            <h4>功能控制</h4>
            <div>
              轻点两下可播放、跳至下一曲目或接听电话 说声“嘿
              Siri”即可播放歌曲、拨打电话或获取路线信息等
            </div>
          </div>
          <div>
            <h4>尺寸和重量</h4>
            <div>
              AirPods (每枚)：16.5 x 18.0 x 40.5 毫米 (0.65 x 0.71 x 1.59 英寸)⁷
            </div>
            <div>
              充电盒：44.3 x 21.3 x 53.5 毫米 (1.74 x 0.84 x 2.11 英寸)⁷
            </div>
            <div>AirPods (每只)：4 克 (0.14 盎司)⁷</div>
            <div>充电盒：38.2 克 (1.35 盎司)⁷</div>
          </div>
          <div>
            <h4>充电盒</h4>
            <div>可通过闪电接口进行充电</div>
          </div>
          <div>
            <h4>电源</h4>
            <div>
              AirPods 搭配充电盒使用：聆听时间可超过 24 小时³，通话时间最长可达
              18 小时⁸ AirPods (单次充电)：聆听时间最长可达 5
              小时¹，通话时间最长可达 3 小时² 放入充电盒中 15
              分钟即可获得最长可达 3 小时的聆听时间⁴ 或最长可达 2
              小时的通话时间⁵
            </div>
          </div>
          <div>
            <h4>连接</h4>
            <div>蓝牙 5.0</div>
          </div>
          <div>
            <h4>辅助功能</h4>
            <div>
              众多辅助功能可帮助残障人士充分发掘新款 AirPods 的精彩。
              各项功能包括： 实时收听音频⁹ 耳机音量调控 耳机调节
            </div>
          </div>
        </div>
      </div>

      <div class="detail">
        <h2 style="font-size: 30px">系统要求</h2>
        <div class="nr">
          <div>
            <div>
              iPhone 和 iPod touch：安装最新版本 iOS 的机型¹⁰<br />
              iPad：安装最新版本 iPadOS 的机型¹⁰<br />
              Apple Watch：安装最新版本 watchOS 的表款¹⁰<br />
              Mac：安装最新版本 macOS 的机型¹⁰
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div class="item-1">
      <div class="title-1" ref="jrx" @click="xlClick(1)">
        <h2 style="font-size: 40px">兼容性</h2>
        <p>
          <svg
            viewBox="0 0 17 8.85"
            class="
              as-svgicon
              as-svgicon-chevrondown
              as-svgicon-base
              as-svgicon-chevrondownbase
            "
            role="img"
            aria-hidden="true"
            width="35px"
            height="35px"
          >
            <path fill="none" d="M0 0h35v35H0z"></path>
            <path
              fill="none"
              stroke="#86868b"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2.25"
              d="M15 1.13L8.5 7.72 2 1.13"
            ></path>
          </svg>
        </p>
      </div>
      <div class="detail-1">
        <h2></h2>
        <div class="nr-1">
          <div>
            <h4>iPhone 机型</h4>
            <div>iPhone 13 Pro</div>
            <div>iPhone 13 Pro Max</div>
            <div>iPhone 13 mini</div>
            <div>iPhone 13</div>
            <div>iPhone SE (第三代)</div>
            <div>iPhone 12 Pro</div>
            <div>iPhone 12 Pro Max</div>
            <div>iPhone 12 mini</div>
            <div>iPhone 12</div>
            <div>iPhone 11 Pro</div>
            <div>iPhone 11 Pro Max</div>
            <div>iPhone 11</div>
            <div>iPhone SE (第二代)</div>
            <div>iPhone XS</div>
            <div>iPhone XS Max</div>
            <div>iPhone XR</div>
            <div>iPhone X</div>
            <div>iPhone 8</div>
            <div>iPhone 8 Plus</div>
            <div>iPhone 7</div>
            <div>iPhone 7 Plus</div>
            <div>iPhone 6s</div>
            <div>iPhone 6s Plus</div>
          </div>
          <div>
            <h4>iPad 机型</h4>
            <div>12.9 英寸 iPad Pro (第五代)</div>
            <div>12.9 英寸 iPad Pro (第四代)</div>
            <div>12.9 英寸 iPad Pro (第三代)</div>
            <div>12.9 英寸 iPad Pro (第二代)</div>
            <div>12.9 英寸 iPad Pro (第一代)</div>
            <div>11 英寸 iPad Pro (第三代)</div>
            <div>11 英寸 iPad Pro (第二代)</div>
            <div>11 英寸 iPad Pro (第一代)</div>
            <div>10.5 英寸 iPad Pro</div>
            <div>9.7 英寸 iPad Pro</div>
            <div>iPad Air (第五代)</div>
            <div>iPad Air (第四代)</div>
            <div>iPad Air (第三代)</div>
            <div>iPad Air 2</div>
            <div>iPad (第九代)</div>
            <div>iPad (第八代)</div>
            <div>iPad (第七代)</div>
            <div>iPad (第六代)</div>
            <div>iPad (第五代)</div>
            <div>iPad mini (第六代)</div>
            <div>iPad mini (第五代)</div>
            <div>iPad mini 4</div>
          </div>
          <div>
            <h4>Mac 机型</h4>
            <div>MacBook Air (M2 芯片，2022 年机型)</div>
            <div>MacBook Air (M1 芯片，2020 年机型)</div>
            <div>MacBook Air (视网膜显示屏，13 英寸，2020 年机型)</div>
            <div>MacBook Air (视网膜显示屏，13 英寸，2018 - 2019 年机型)</div>
            <div>MacBook Air (13 英寸，2015 年初 - 2017 年机型)</div>
            <div>MacBook Air (11 英寸，2015 年初机型)</div>
            <div>MacBook Pro (13 英寸，M2 芯片，2022 年机型)</div>
            <div>MacBook Pro (13 英寸，M1 芯片，2020 年机型)</div>
            <div>MacBook Pro (13 英寸，2020 年机型)</div>
            <div>MacBook Pro (13 英寸，2016 年 - 2019 年机型)</div>
            <div>
              MacBook Pro (视网膜显示屏，13 英寸，2012 年末 - 2015 年机型)
            </div>
            <div>MacBook Pro (14 英寸，2021 年机型)</div>
            <div>MacBook Pro (16 英寸，2021 年机型)</div>
            <div>MacBook Pro (16 英寸，2019 年机型)</div>
            <div>MacBook Pro (15 英寸，2016 年 - 2019 年机型)</div>
            <div>
              MacBook Pro (视网膜显示屏，15 英寸，2012 年中 - 2015 年机型)
            </div>
            <div>MacBook (视网膜显示屏，12 英寸，2015 年初 - 2017 年机型)</div>
            <div>iMac (24 英寸，M1 芯片，2021 年机型)</div>
            <div>iMac (4K 视网膜显示屏，21.5 英寸，2019 年机型)</div>
            <div>iMac (4K 视网膜显示屏，21.5 英寸，2017 年机型)</div>
            <div>iMac (4K 视网膜显示屏，21.5 英寸，2015 年末机型)</div>
            <div>iMac (5K 视网膜显示屏，27 英寸，2019 年 - 2020 年机型)</div>
            <div>iMac (5K 视网膜显示屏，27 英寸，2017 年机型)</div>
            <div>iMac (5K 视网膜显示屏，27 英寸，2014 年末 - 2015 年机型)</div>
            <div>iMac Pro (2017 年机型)</div>
            <div>Mac Studio (2022 年机型)</div>
            <div>Mac mini (M1 芯片，2020 年机型)</div>
            <div>Mac mini (2018 年机型)</div>
            <div>Mac mini (2014 年末机型)</div>
            <div>Mac Pro (2019 年机型)</div>
            <div>Mac Pro (2013 年末机型)</div>
          </div>
          <div>
            <h4>Apple Watch 表款</h4>
            <div>Apple Watch Series 7</div>
            <div>Apple Watch Series 6</div>
            <div>Apple Watch SE</div>
            <div>Apple Watch Series 5</div>
            <div>Apple Watch Series 4</div>
            <div>Apple Watch Series 3</div>
            <div>Apple Watch Series 2</div>
            <div>Apple Watch Series 1</div>
          </div>
          <div>
            <h4>iPod 机型</h4>
            <div>iPod touch (第七代)</div>
          </div>
        </div>
      </div>
    </div>
    <div class="f4">
      <div class="center">
        <div class="airPods-like">
          <h2>你可能还会喜欢</h2>
        </div>
        <div id="banner">
          <div class="airPods-lunbo">
            <div class="airPods-1" @click="$router.push('/airPodsPro')">
              <img :src="data[`ysh2_lg6.jpg`]" alt="" />
              <div class="wenzi-1">
                <span>免费镌刻服务</span>
                <p>
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      color: #1d1d1f;
                      font-weight: 600;
                    "
                    >airPodsPro</a
                  >
                </p>
                <p>RMB 1,399</p>
              </div>
            </div>

            <div class="airPods-2" @click="$router.push('/airPods2')">
              <img :src="data[`ysh2_lg7.jpg`]" alt="" />
              <div class="wenzi-2">
                <span>免费镌刻服务</span>
                <p>
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      color: #1d1d1f;
                      font-weight: 600;
                    "
                    >AirPods (第二代)</a
                  >
                </p>
                <p>RMB 999</p>
              </div>
            </div>

            <div class="airPods-3" @click="$router.push('/airPodsMax')">
              <img :src="data[`ysh2_lg8.jpg`]" alt="" />
              <div class="wenzi-3">
                <span>免费镌刻服务</span>
                <p>
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      color: #1d1d1f;
                      font-weight: 600;
                    "
                    >AirPods Max-银色</a
                  >
                </p>
                <p>RMB 4,399</p>
              </div>
            </div>

            <div class="airPods-4">
              <img :src="data[`ysh2_lg9.jpg`]" alt="" />
              <div class="wenzi-4">
                <span>&nbsp;</span>
                <p>
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      color: #1d1d1f;
                      font-weight: 600;
                    "
                    >适用于 AirPods 的无线充电盒</a
                  >
                </p>
                <p>RMB 611</p>
              </div>
            </div>

            <div class="airPods-5">
              <img :src="data[`ysh2_lg10.jpg`]" alt="" />
              <div class="wenzi-5">
                <span>免费镌刻服务</span>
                <p>
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      color: #1d1d1f;
                      font-weight: 600;
                    "
                    >AirTag</a
                  >
                </p>
                <p>RMB 229</p>
              </div>
            </div>

            <div class="airPods-6">
              <img :src="data[`ysh2_lg11.jpg`]" alt="" />
              <div class="wenzi-6">
                <span>免费镌刻服务</span>
                <p>
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      color: #1d1d1f;
                      font-weight: 600;
                    "
                    >AirTag四件套</a
                  >
                </p>
                <p>RMB 799</p>
              </div>
            </div>

            <div class="airPods-7">
              <img :src="data[`ysh2_lg12.jpg`]" alt="" />
              <div class="wenzi-7">
                <span>免费镌刻服务</span>
                <p>
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      color: #1d1d1f;
                      font-weight: 600;
                    "
                    >AirTag四件套</a
                  >
                </p>
                <p>RMB 799</p>
              </div>
            </div>

            <div class="airPods-8">
              <img :src="data[`ysh2_lg13.jpg`]" alt="" />
              <div class="wenzi-8">
                <span>免费镌刻服务</span>
                <p>
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      color: #1d1d1f;
                      font-weight: 600;
                    "
                    >AirTag四件套</a
                  >
                </p>
                <p>RMB 799</p>
              </div>
            </div>

            <div class="airPods-9">
              <img :src="data[`ysh2_lg14.jpg`]" alt="" />
              <div class="wenzi-9">
                <span>免费镌刻服务</span>
                <p>
                  <a
                    href=""
                    style="
                      text-decoration: none;
                      color: #1d1d1f;
                      font-weight: 600;
                    "
                    >AirTag四件套</a
                  >
                </p>
                <p>RMB 799</p>
              </div>
            </div>
          </div>
          <div>
            <!-- <span class="active"></span> -->
            <!-- <span></span> -->
          </div>
          <!-- <div>
            <button class="active">《</button>
            <button>》</button>
          </div> -->
        </div>
      </div>
    </div>
    <div class="f5">
      <div class="center">
        <div class="airPods-ho">
          <ul>
            <img :src="data[`airpods-202110-applemusic-logo.jpg`]" alt="" />
            <li>
              <h4>购买 AirPods，</h4>
            </li>
            <li>
              <h4>Apple Music 免费试听 6</h4>
            </li>
            <li>
              <h4>个月⁺。</h4>
            </li>
            <li
              style="
                color: #0066cc;
                font-size: 19px;
                margin-top: 16px;
                font-weight: 400;
              "
            >
              进一步了解 >
            </li>
          </ul>
          <div>
            <img :src="data[`airpods-202204-applemusic_GEO_CN.jpg`]" alt="" />
          </div>
        </div>
      </div>
    </div>
    <msg-mask ref="msgMaskbtn" />
  </div>
</template>


<script>
import $ from "jquery";
import MsgMask from "@/components/MsgMask.vue";

export default {
  components: {
    MsgMask,
  },
  data() {
    return {
      data: null,
      productData: null,
      userBagData: null,
      //商品标题
      proTitle: "",
      //商品价格
      proPrice: 0,
      //商品图片
      proImg: "",
    };
  },

  methods: {
    getData() {
      let url = "http://localhost:3000/yshImg";
      axios.get(url).then((res) => {
        this.data = res.data;
        // console.log(res.data);
      });
    },
    getProductData() {
      let url = `http://localhost:3000/product/13`;
      axios.get(url).then((res) => {
        this.productData = res.data;
        console.log(res.data);
      });
    },
    dxtclick(i) {
      let items = $(this.$refs.imgs).children();
      let item = $(items[i]);
      item.addClass("active").siblings().removeClass("active");
      let dt = item.data("lg");

      let big = $(this.$refs.bigimg);
      big.attr("src", this.data[dt]);
      console.log(dt);
      // $(this.$refs.img1).addClass("active").siblings().removeClass("active");
    },
    xlClick(i) {
      if (i == 0) {
        let cpxx = $(this.$refs.cpxx);
        cpxx[0].classList.toggle("close");
        return;
      } else if (i == 1) {
        let jrx = $(this.$refs.jrx);
        jrx[0].classList.toggle("close");
      }
    },
    addToShopBag() {
      let user = sessionStorage.getItem("user");
      //判断是否选择了商品
      if (this.now < 0) {
        return;
      }
      // 判断是否登录过，否则就直接返回到登录页面
      if (user == "" || !user) {
        this.$refs.msgMaskbtn.setInformation({
          title: "未登录",
          // btnTitle:'去登陆',
          callback() {
            this.$router.push("/login");
          },
        });
        this.$refs.msgMaskbtn.showbtnMask();
        return;
      }

      //解析json字符串为js对象
      user = JSON.parse(user);

      //用户信息已经拿到了,接下来是拿到用户购物袋的信息
      let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
      axios.get(userurl).then((res) => {
        this.userBagData = res.data;

        // 需要更改 this.proTitle  -> this.productData.title
        let seemProduct = this.checkProductNum(this.productData.title);

        //商品在数据库里的数量如果不等于空
        //就代表着有重复着的数据
        if (seemProduct != null) {
          let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
          seemProduct.num += 1;
          // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
          // 另外需要将对象里的num数量+1
          axios.put(url2, seemProduct).then((res) => {
            this.$refs.msgMaskbtn.setInformation({
              title: "添加商品成功",
            });
            this.$refs.msgMaskbtn.showbtnMask();
          });
        } else {
          //这里是没找到重复商品的操作
          //正常的添加操作 post
          let url = `http://localhost:3000/user/${user.id}/shopBagList`;
          axios
            //需要改的
            .post(url, {
              title: this.productData.title,
              price: this.productData.price,
              img: this.productData.toListImg,
              num: 1, //默认的参数 已添加为1
              //post的参数是一个对象，里面只接受四个参数
            })
            .then((res) => {
              this.$refs.msgMaskbtn.setInformation({
                title: "添加商品成功",
              });
              this.$refs.msgMaskbtn.showbtnMask();
            });
        }
      });
    },
    checkProductNum(proTitle) {
      //检查用户列表下的商品数量
      //返回值 重复的商品对象
      //参数，需要进行检查的商品标题
      for (const e of this.userBagData) {
        if (e.title == proTitle) {
          return e;
        }
      }
      return null;
    },
  },
  mounted() {
    this.getData();
    this.getProductData();
  },
};
</script>

<style lang="less" scoped>
#airpods2 {
  width: 100%;
  height: 100%;
}
</style>
<style src="../assets/css/airpods2.css"></style>